
// 默认都在src文件夹下查找
const path = require('path')
const webpack=require('webpack')
// 这个插件有客户端热更行和将html区分出来并且托管到内存中的功能
const HTMLWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 入口可以是多个
  // entry:{main:["babel-polyfill",'./src/index.js']},//这是一种可以解决高版本js语法的方式
  entry:{main:['./src/index.js']},

  output:{
    // 使用webpack-dev-server 打包的东西在内存中 文件夹里看不到
    filename:'[name]-bundle.js',
    path:path.join(__dirname,'../dist/'),
    publicPath:'/'
  },
  mode:'development',
  devServer:{
    contentBase:'dist',
    port:3333,
    hot:true,
    //webpack报错会在页面上显示
    overlay:true,
  },
  devtool:'source-map',
  // webpack默认只会打包js文件如果需要加载其他的文件需要 module--rules--配置
  module:{
    rules:[
      // js
      {
        test:/\.js$/,
        use:[
          {
            loader:'babel-loader'
          }
        ],
        exclude:/node_modules/
      },
      // css
      { 
        test:/\.css$/,
        use:['style-loader', 'css-loader'] 
      },
      { 
        test:/\.sass$/,
        use:['style-loader', 'css-loader','sass-loader'] 
      },
      { 
        test:/\.less$/,
        use:['style-loader', 'css-loader','less-loader'] 
      },
      { 
        test:/\.styl$/,
        use:['style-loader', 'css-loader', 'postcss-loader','stylus-loader'] 
      },
      // html
      {
        test:/\.html$/, 
        use:[
          // {
          //   // 给html文件命名
          //   loader:'file-loader',
          //   options:{
          //     name:'[name].html'
          //   }
          // },
          // {
          //   // 把html文件与bundle.js文件区别开来
          //   loader:'extract-loader',

          // },
          {
            // 找到html文件
            loader:"html-loader",
            options:{
              // 不用这行图片也能展示
              attrs:['img:src']
            }
          }
        ]
      },
      // img
      {
        test:/\.(jpg|jpeg|png|gif)$/,
        use:[
          {
            loader:'file-loader',
            options:{
              name:"[name]-[hash:5].[ext]"
            }
          }
        ]
      }
    ]
  },
  plugins:[
      new webpack.HotModuleReplacementPlugin(),
      new HTMLWebpackPlugin({
        // template:'./src/index.html'
        template:'./src/index.ejs',
        title:'王'
      })
    ]
}